<template>
	<view class="page">
		<view class="denglu" @click="goToLogin">
			<view class="zuo">
				<view class="zhong" style="display: flex; align-items: center; padding: 0 20px;">
					<u-avatar :src="userAvatar" size="40" style="margin-right: 20px;"></u-avatar>
					<view class="user-info">
						<text class="zhuce">{{ displayText }}</text>
					</view>
					<view class="you" style="margin-left: 140px;">
						<uni-icons type="right" size="30"></uni-icons>
					</view>
				</view>
			</view>
		</view>

		<view class="content-container">
			<view class="content">
				<view class="function-area">
					<view class="function-item" @click="navigateToPage('预存款')">
						<text class="label">预存款</text>
						<text class="value">0.00</text>
					</view>
					<view class="function-item" @click="navigateToPage('优惠券')">
						<text class=" label">优惠券</text>
						<text class="value">0</text>
					</view>
					<view class="function-item" @click="navigateToPage('我的足迹')">
						<text class=" label">足迹</text>
						<text class="value">0</text>
					</view>
				</view>

				<!-- 图标 -->
				<view class="tubiao">
					<u-grid :border="false" col="5">
						<u-grid-item v-for="(listItem, listIndex) in list1" :key="listIndex"
							@click="navigateToPage(listItem.title)">
							<u-icon :customStyle="{ paddingTop: 20 + 'rpx' }" :name="listItem.name" :size="22"></u-icon>
							<text class="grid-text">{{ listItem.title }}</text>
						</u-grid-item>
					</u-grid>
				</view>
			</view>

			<view class="xiamiande">
				<u-grid :border="false" col="4">
					<u-grid-item v-for="(list2Item, list2Index) in list2" :key="list2Index"
						@click="navigateToPage(list2Item.title)">
						<u-icon :customStyle="{ paddingTop: 20 + 'rpx' }" :name="list2Item.name" :size="22"></u-icon>
						<text class="grid-text">{{ list2Item.title }}</text>
					</u-grid-item>
				</u-grid>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			userInfo: null,
			isLogin: false,
			userAvatar: '/static/img/我的.png',
			displayText: '登录/注册',
			list1: [{
				name: 'bag-fill',
				title: '待付款'
			},
			{
				name: 'car-fill',
				title: '待收货'
			},
			{
				name: 'star',
				title: '待评价'
			},
			{
				name: 'server-man',
				title: '售后'
			},
			{
				name: 'order',
				title: '我的订单'
			}
			],
			list2: [{
				name: 'map-fill',
				title: '地址管理'
			},
			{
				name: 'car',
				title: '我的足迹'
			},
			{
				name: 'edit-pen',
				title: '我的评价'
			},
			{
				name: 'heart',
				title: '我的关注'
			},
			{
				name: 'integral',
				title: '我的积分'
			},
			{
				name: 'list-dot',
				title: '我的分销'
			},
			{
				name: 'star',
				title: '我的投诉'
			},
			{
				name: 'coupon',
				title: '优惠券'
			},

			{
				name: 'coupon-fill',
				title: '领卷中心'
			},

			{
				name: 'edit-pen-fill',
				title: '意见反馈'
			},
			{
				name: 'more-dot-fill',
				title: '关于'
			},
			{
				name: 'edit-pen',
				title: '店铺入驻'
			},
			{
				name: 'setting',
				title: '设置'
			}
			]
		}
	},
	onLoad() {
		// 页面首次加载时检查登录状态
		this.checkLoginStatus();
	},
	onShow() {
		// 添加全局事件监听
		uni.$on('loginStatusChanged', this.checkLoginStatus);

		// 检查是否有登录成功的标记
		const loginSuccessFlag = uni.getStorageSync('loginSuccessFlag');
		const loginSuccessTime = uni.getStorageSync('loginSuccessTime');

		// 如果检测到登录成功标记，立即更新显示
		if (loginSuccessFlag && loginSuccessTime) {
			// 清除标记，避免重复处理
			uni.removeStorageSync('loginSuccessFlag');
			uni.removeStorageSync('loginSuccessTime');

			// 延迟一下再检查，确保数据已保存
			setTimeout(() => {
				this.checkLoginStatus();
			}, 100);
		}
	},
	onHide() {
		// 移除事件监听
		uni.$off('loginStatusChanged', this.checkLoginStatus);
	},
	methods: {
		checkLoginStatus() {
			// 检查本地存储的登录状态
			const token = uni.getStorageSync('userToken');
			const userInfo = uni.getStorageSync('userInfo');
			const isLogin = uni.getStorageSync('isLogin');

			console.log('检查登录状态:', { token, userInfo, isLogin });

			if (token && userInfo && isLogin) {
				console.log(token)
				console.log(userInfo)
				// 已登录
				this.isLogin = true;
				this.userInfo = userInfo;
				this.userAvatar = userInfo.avatar || '/static/img/我的.png';

				// 优先显示昵称，如果没有则显示用户名
				if (userInfo.nickname && userInfo.nickname.trim()) {
					this.displayText = userInfo.nickname;
				} else if (userInfo.username && userInfo.username.trim()) {
					this.displayText = userInfo.username;
				} else {
					this.displayText = '用户';
				}

				console.log('用户已登录，显示信息:', {
					nickname: userInfo.nickname,
					username: userInfo.username,
					displayText: this.displayText,
					avatar: this.userAvatar,
					id: this.memberId
				});
			} else {
				// 未登录
				this.isLogin = false;
				this.userInfo = null;
				this.userAvatar = '/static/img/我的.png';
				this.displayText = '登录/注册';
				console.log('用户未登录');
			}
		},
		goToLogin() {
			if (this.isLogin) {
				// 已登录，跳转到个人资料页面
				uni.navigateTo({
					url: '/pages/gerenxinxi/gerenxinxi',
					success: () => {
						console.log('跳转到个人信息页面成功');
					},
					fail: (err) => {
						console.log('跳转到个人信息页面失败:', err);
						uni.showToast({
							title: '页面跳转失败',
							icon: 'none'
						});
					}
				});
			} else {
				// 未登录，跳转到登录页面
				uni.navigateTo({
					url: '/pages/login/login',
					success: () => {
						console.log('跳转到登录页面成功');
					},
					fail: (err) => {
						console.log('跳转到登录页面失败:', err);
						uni.showToast({
							title: '页面跳转失败',
							icon: 'none'
						});
					}
				});
			}
		},
		navigateToPage(pageName) {
			console.log('点击的页面名称:', pageName)

			const pageMap = {
				'预存款': '/pages/yucunkuan/yucunkuan',
				'优惠券': '/pages/wodeyouhuiquan/wodeyouhuiquan',
				'待付款': '/pages/wodedingdan/daifukuan',
				'待收货': '/pages/wodedingdan/daishouhuo',
				'待评价': '/pages/daipingjia/daipingjia',
				'售后': '/pages/shouhou/shouhou',
				'我的订单': '/pages/wodedingdan/wodedingdan',
				'足迹': '/pages/zuji/zuji',
				'地址管理': '/pages/dizhiguanli/dizhiguanli',
				'我的足迹': '/pages/zuji/zuji',
				'我的评价': '/pages/daipingjia/daipingjia',
				'我的关注': '/pages/wodeguanzhu/wodeguanzhu',
				'我的积分': '/pages/wodejifen/wodejifen',
				'我的分销': '/pages/yinhangka/yinhangka',
				'我的投诉': '/pages/wodetousu/wodetousu',
				'领卷中心': '/pages/lingquanzhongxin/lingquanzhongxin',
				'意见反馈': '/pages/wodeyijian/wodeyijian',
				'关于': '/pages/guanyuwomen/guanyuwomen',
				'店铺入驻': '/pages/dianpuruzhu/dianpuruzhu',
				'设置': '/pages/shezhi/shezhi',
				'证照信息': '/pages/zhengzhaoxinxi/zhengzhaoxinxi',
				'服务协议': '/pages/fuwuxieyi/fuwuxieyi',
			};

			const targetPage = pageMap[pageName];
			console.log('目标页面路径:', targetPage)

			if (targetPage) {
				console.log('准备跳转到:', targetPage)
				uni.navigateTo({
					url: targetPage,
					success: () => {
						console.log('跳转成功到:', targetPage)
						uni.showToast({
							title: '跳转成功',
							icon: 'success'
						});
					},
					fail: (err) => {
						console.log('跳转失败:', err);
						uni.showToast({
							title: '页面跳转失败',
							icon: 'none'
						});
					}
				});
			} else {
				console.log('未找到页面映射:', pageName)
				uni.showToast({
					title: '功能开发中',
					icon: 'none'
				});
			}
		}
	}
}
</script>

<style lang="scss">
.page {
	background-color: #dedede;
	min-height: 100vh;
}

.denglu {
	height: 80px;
	background: linear-gradient(#FD363A, #FF775D);
	padding: 10px;
	display: flex;
	border-bottom-left-radius: 20px;
	border-bottom-right-radius: 20px;
}

.zhuce {
	color: #fff;
	font-size: 18px;
}

.user-info {
	display: flex;
	flex-direction: column;
	gap: 5px;
}

.user-id {
	color: rgba(255, 255, 255, 0.8);
	font-size: 14px;
}

.content {
	background-color: white;
	height: 100px;
	border-radius: 20px;
	padding: 10px;
	margin: -20px auto 0;
	width: 90%;
}

.function-area {
	display: flex;
	justify-content: space-around;
	position: relative;
	z-index: 0;

	.function-item {
		display: flex;
		flex-direction: column;
		align-items: center;

		.value {
			color: red;
			font-size: 13px;
			font-weight: bold;
			margin-bottom: 5px;
		}

		.label {
			color: #666;
			font-size: 15px;
		}
	}
}

.xiamiande {
	background-color: white;
	border-radius: 20px;
	padding: 10px;
	margin: 20px auto 10px;
	width: 90%;
}

/* 网格容器 */
.u-grid {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	/* 两端对齐 */
	padding: 0 10rpx;
	/* 左右内边距 */
}

/* 每个网格项（图标+文字） */
.u-grid-item {
	width: 25%;
	/* 一行4个 */
	display: flex;
	flex-direction: column;
	align-items: center;
	margin-bottom: 30rpx;
	/* 行间距 */
}

/* 图标样式 */
.u-icon {
	margin-bottom: 10rpx;
	/* 图标与文字间距 */
}

/* 文字样式 */
.grid-text {
	font-size: 24rpx;
	color: #333;
	text-align: center;
}
</style>